<template>
    <div>
        <combo02 @result="comboResult" :options="comboList"></combo02>
        <div class="search-pay-type" v-show="comboData==0 && userPayType!=0">
            <div class="buy-type">购买类型</div>
            <RadioGroup v-model="searchPayType" class="Radio">
                <Radio label="1" size="large" class="Radio">为本账号续费</Radio>
                <Radio label="2" size="large" class="Radio">添加新账号</Radio>
            </RadioGroup>
            <div class="pay-num">
                <Row>
                    <Col span="4">账号个数</Col>
                    <Col span="5">
                        <InputNumber :max="50" :min="1" v-model="payNum"></InputNumber>
                    </Col>
                    <Col span="9">X 单价：{{showTotalMoney.price}}元/个 =</Col>
                    <Col span="6" class="pay-num-text">{{ showTotalMoney.total }}</Col>
                </Row>
            </div>
        </div>

        <div class="search-pay-type" v-show="comboData && comboData!=0 && userPayType!=0">
            <div class="buy-type">购买类型</div>
            <RadioGroup v-model="searchPayType">
                <Radio label="3" size="large" class="Radio">在该账号下添加{{ getBuyTypeNum }}个账号</Radio>
                <Radio label="4" size="large" class="Radio">为该账号续费一年+{{ getBuyTypeNum -1}}个子账号</Radio>
            </RadioGroup>
        </div>
        <Divider/>

        <div class="company-pay">
            <h3>对公账户付款</h3>
            <p>账户名：天津商聚电子商务有限公司</p>
            <p>银行：渤海银行股份有限公司天津北辰支行</p>
            <p>账号：2001177450000167</p>
            <p>（对公账户付款请联系客服：17802207686）</p>
        </div>
        <pay01 @result="payResult"></pay01>
        <Button type="primary" @click="payNow" class="pay-button">立即支付</Button>
        <Modal
                title="请用微信扫描二维码"
                v-model="payModel"
                @on-cancel="payModel=false"
                :closable="false">
            <div id="qrCode" ref="qrCodeDiv"></div>
            <div slot="footer">
                <Button type="primary" size="large" @click="payModel=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { userCreateOrder, checkOrderStatus, getUserBuyList, getComboList } from '@/api/user'
import QRcode from 'qrcodejs2'
import Combo02 from './components/combo02'
import Pay01 from './components/pay01'

export default {
  components: { Pay01, Combo02 },
  data () {
    return {
      comboData: 0,
      payType: '',
      payModel: false,
      order: '',
      apiRun: false,
      searchPayType: '0',
      payNum: 1,
      buyOneCount: 0,
      userPayType: 0,
      comboList: []
    }
  },
  computed: {
    showTotalMoney () {
      let comboInfo = this.comboList[this.comboData]
      if (comboInfo) {
        let money = comboInfo.price * 0.01
        if (this.buyOneCount >= 4 || this.userPayType > 2) {
          money = comboInfo.next_price * 0.01
        }
        return { price: money, total: '总计：' + this.payNum * money + '元' }
      } else {
        return { price: 0, total: '总计：' + this.payNum * 0 + '元' }
      }
    },
    getBuyTypeNum () {
      let comboInfo = this.comboList[this.comboData]
      if (comboInfo) {
        return comboInfo.num
      } else {
        return 0
      }
    }
  },
  mounted () {
    let _this = this
    this.userIsBuy()
    this.getComboDataList()
    setInterval(function () {
      if (_this.payModel === true) {
        _this.checkPayState()
      }
    }, 1000)
  },
  methods: {
    payNow () {
      let postData = {
        combo_id: this.comboList[this.comboData].id,
        pay_type: this.payType,
        num: this.payNum,
        searchPayType: this.searchPayType
      }
      if (this.comboData === '') {
        this.$Message.error('请选择套餐')
        return false
      }
      if (this.payType === '') {
        this.$Message.error('请选择支付类型')
        return false
      }
      if (this.comboData === 0 && this.userPayType !== 0) {
        if (this.searchPayType !== '1' && this.searchPayType !== '2') {
          this.$Message.error('请选择类型')
          return false
        }
      }
      if (this.comboData >= 1 && this.userPayType !== 0) {
        if (this.searchPayType !== '3' && this.searchPayType !== '4') {
          this.$Message.error('请选择类型')
          return false
        }
      }
      this.createOrder(postData)
    },
    createOrder (data) {
      userCreateOrder(data).then(ret => {
        if (ret.data.errcode === 1001) {
          if (this.payType === 1) {
            window.open(ret.data.data.pay_url)
            this.$Modal.confirm({
              title: '支付宝支付',
              content: '支付成功后点击确定按钮',
              okText: '支付成功',
              onOk: function () {
                checkOrderStatus(ret.data.data.order).then(ret => {
                  this.apiRun = false
                  if (ret.data.errcode === 1001) {
                    this.$Message.success('支付成功')
                    location.reload()
                  }
                }).catch(e => {
                  this.apiRun = false
                })
              }
            })
          } else {
            this.order = ret.data.data.order
            this.payModel = true
            this.$refs.qrCodeDiv.innerHTML = ''
            let qrcode = new QRcode('qrCode', {
              width: 200,
              height: 200, // 高度
              text: ret.data.data.pay_url, // 二维码内容
              render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
              // background: '#f0f',
              // foreground: '#ff0'
            })
            console.log(qrcode)
          }
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    checkPayState () {
      if (this.apiRun === false) {
        this.apiRun = true
        checkOrderStatus(this.order).then(ret => {
          this.apiRun = false
          if (ret.data.errcode === 1001) {
            this.$Message.success('支付成功')
            location.reload()
          }
        }).catch(e => {
          this.apiRun = false
        })
      }
    },
    userIsBuy () {
      getUserBuyList().then(ret => {
        if (ret.data.errcode === 1001) {
          this.userPayType = ret.data.data.type
          this.buyOneCount = ret.data.data.count
        } else {
          this.userPayType = 0
        }
      })
    },
    comboResult (num) {
      this.comboData = num
    },
    payResult (num) {
      this.payType = num
    },
    getComboDataList () {
      getComboList().then(ret => {
        if (ret.data.errcode === 1001) {
          this.comboList = ret.data.data
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
    .pay-button {
        margin-top: 20px;
    }

    #qrCode {
        display: flex;
        justify-content: center;
    }

    .company-pay {
        font-size: 14px;
        line-height: 1.7;
        padding: 20px 0 0 20px;
    }

    .search-pay-type {
        margin-top: 40px;

        .pay-num {
            margin-top: 10px;
            font-size: 18px;
            font-weight: bold;
            width: 520px;

            &-text {
                color: red;
            }
        }

        .buy-type {
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: bold;
        }
    }

    .Radio {
        color: red;
        font-size: 18px;
    }
</style>
